import React from 'react'
import { Modal, Input, Form, Select, Switch } from 'antd'
import axios from 'axios'
import { checkres } from 'utils'

const { Option } = Select
const { TextArea } = Input

export default function ModalEdit(props) {
  const { visible, onCancel, onOk, mode, record } = props
  const [loading, setLoading] = React.useState()
  const [form] = Form.useForm()

  React.useEffect(() => {
    if (!visible) return
    switch (mode) {
      case 'add':
        form.resetFields()
        break
      case 'update':
        form.setFieldsValue({
          ...record,
          switching: record.switching === 1 ? true : false,
        })
        break
    }
  }, [visible])

  function onSubmit() {
    form.validateFields().then(fields => {
      setLoading(true)
      fields.switching = fields.switching == true ? 1 : 0
      fields.runStatus = fields.switching == true ? 1 : 0
      if (mode === 'update') fields.id = record.id
      axios.post('/forward/' + mode, { ...fields }).then(res => {
        setLoading(false)
        if (!checkres(res)) return
        onCancel()
        onOk()
      })
    })
  }

  return (
    <Modal
      visible={visible}
      title={mode === 'add' ? '新增' : '修改'}
      onCancel={onCancel}
      onOk={onSubmit}
      confirmLoading={loading}
    >
      <Form
        form={form}
        wrapperCol={{ span: 18 }}
        labelCol={{ span: 6 }}
        initialValues={{ switching: true }}
      >
        <Form.Item
          name="name"
          label="名称"
          rules={[{ required: true, message: '名称为必填' }]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="account"
          label="转发账号"
          rules={[{ required: true, message: '转发账号为必填' }]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="password"
          label="转发密码"
          rules={[{ required: true, message: '转发密码为必填' }]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="accountFiling"
          label="备案账号"
          rules={[{ required: true, message: '备案账号为必填' }]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="passwordFiling"
          label="备案密码"
          rules={[{ required: true, message: '备案密码为必填' }]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="router"
          label="路由"
          rules={[{ required: true, message: '路由为必填' }]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="encryptKey"
          label="加密KEY"
          rules={[{ required: true, message: '加密KEY为必填' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="fwProtocol"
          label="协议"
          rules={[{ required: true, message: '协议为必填' }]}
        >
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          name="emissionStandards"
          label="排放类型"
          rules={[{ required: true, message: '排放类型为必填' }]}
        >
          <Select
            onChange={value => {
              if (JSON.stringify(record) === '{}') {
                form.setFieldsValue({
                  router:
                    value == 5
                      ? 'g6check.vecc-mep.org.cn:29005'
                      : value == 6
                      ? 'g6check.vecc-mep.org.cn:29007'
                      : '',
                })
              }
            }}
          >
            <Option value="5">国五</Option>
            <Option value="6">国六</Option>
            <Option value="98">杭州鉴权</Option>
            <Option value="99">宁波鉴权</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="switching"
          label="启动控制"
          rules={[{ required: true, message: '启动控制为必填' }]}
          valuePropName="checked"
        >
          <Switch checkedChildren="NO" unCheckedChildren="OFF" />
        </Form.Item>
      </Form>
    </Modal>
  )
}
